<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<script src="/property/js/jquery.min.js"></script>
	<th:block th:include="include :: header('新增岗位')" />
</head>
<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			url: "water/sortList",
			type: "get",
			dataType: "json",
			success:function(data){
				for (var i = 0; i < data.length; i++) {
					//先创建好select里面的option元素
					var option = document.createElement("option");
					//给option的text赋值,这就是你点开下拉框能够看到的东西
					$(option).text(data[i].sort_name);
					$(option).val(data[i].sort_id);
					$('#sortName').append(option);
					//获取select 下拉框对象,并将option添加进select
					// $select.append('<option values="'+content.categories[i].categoryId+'">'+content.categories[i].categoryName+'</option>');
				}
			},
		});
	});
</script>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-product-add" enctype="multipart/form-data" >
<!--			<div class="form-group">-->
<!--				<label class="col-sm-3 control-label is-required">商品id：</label>-->
<!--				<div class="col-sm-8">-->
<!--					<input class="form-control" type="text" name="product_id" id="product_id" required>-->
<!--				</div>-->
<!--			</div>-->
			<input class="form-control" type="hidden" name="product_id" id="product_id" required>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">主商品名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="product_name" id="product_name" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">子商品名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="name" id="name" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">价格：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="price" id="price" required>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label is-required">库存：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="stock" id="stock" required>
				</div>
			</div>
		<!--			从分类表里面读取-->
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">分类：</label>
				<div class="col-sm-8">
<!--					下拉框，从数据库中读取分类数据-->
				<select class="form-control" id="sortName" name="sort_name">


				</select>
				</div>
			</div>
		<!--			上传图片-->
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">图片：</label>
				<div class="col-sm-8">
<!--					<input class="form-control" type="file" name="img" id="img" required>-->
					<input class="form-control" id="img"   type="file" required/>
				</div>
			</div>
		<!--			大小-->
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">规格：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="size" id="size" required>
				</div>
			</div>
		<!--			颜色-->
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">颜色：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="color" id="color" required>
				</div>
			</div>
		<!--			详细信息info-->
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">详细信息：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="info" id="info" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="state" id="state" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<textarea id="remark" name="remark" class="form-control"></textarea>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<script type="text/javascript">
		var prefix = ctx + "water";
		function submitHandler() {
			const img = document.getElementById("img").files[0];
			console.log(img);
			var form = $('#form-product-add')[0];
			console.log(form);
			var data = new FormData(form);
			console.log(data);
			data.append('headImg', img);
			console.log(data.get('headImg'));
			$.operate.save1(prefix + "/add",data);

	    }



	</script>
</body>
</html>
